<nz-drawer
  nzClosable="false"
  [nzExtra]="extra"
  [nzVisible]="visible"
  nzPlacement="right"
  i18n-nzTitle="@@iam.policies.policy-drawer.title"
  nzTitle="Add policy"
  [nzWidth]="500"
  (nzOnClose)="onClose()">
  <ng-container *nzDrawerContent>
    <form nz-form [formGroup]="form" (ngSubmit)="doSubmit()" nzLayout="vertical">
      <!-- name -->
      <nz-form-item>
        <nz-form-label nzRequired i18n="@@common.name">Name</nz-form-label>
        <nz-form-control nzHasFeedback nzValidatingTip="Validating..." i18n-nzValidatingTip="@@common.validating" [nzErrorTip]="errorTpl">
          <input type="text" nz-input formControlName="name" placeholder="Name" i18n-placeholder="@@common.name"/>
        </nz-form-control>
        <ng-template #errorTpl let-control>
          <ng-container *ngIf="control.hasError('required')" i18n="@@iam.policies.policy-drawer.policy-name-cannot-be-empty">Policy name cannot be empty</ng-container>
          <ng-container *ngIf="control.hasError('duplicated')" i18n="@@iam.policies.policy-drawer.policy-name-unavailable">This policy name is not available</ng-container>
        </ng-template>
      </nz-form-item>

      <!-- description -->
      <nz-form-item>
        <nz-form-label i18n="@@common.description">Description</nz-form-label>
        <nz-form-control nzErrorTip="Description" i18n-nzErrorTip="@@common.description">
          <textarea nz-input placeholder="Description" i18n-placeholder="@@common.description" formControlName="description" ></textarea>
        </nz-form-control>
      </nz-form-item>
    </form>
    <button (click)="doSubmit()" nz-button class="submit-btn" [nzType]="'primary'" [nzLoading]="isLoading" i18n="@@common.save">Save</button>
  </ng-container>
  <ng-template #extra>
    <i (click)="onClose()" nz-icon nzType="icons:icon-close"></i>
  </ng-template>
</nz-drawer>

